<template>
  <footer class="gw-footer">
    <div :style="{ height }" />
    <section ref="content" class="content" :class="{ fixed }" :style="{ 'text-align': align }">
      <slot />
    </section>
  </footer>
</template>

<script>
export default {
  name: 'GwFooter',
  props: {
    fixed: Boolean,
    align: {
      type: String,
      default: 'center'
    }
  },
  data() {
    return {
      height: 0
    }
  },
  created() {
    this.$nextTick(() => {
      this.render()
    })
  },
  methods: {
    render() {
      if (this.$refs.content && this.fixed) {
        this.height = (this.$refs.content.scrollHeight - 15) + 'px'
      } else {
        this.height = 0
      }
    }
  }
}
</script>

<style lang="scss">
@import "~@style";

.gw-footer {
  display: block;

  & > .content {
    padding: $space / 1.5 $space;
    background-color: $white;
    box-shadow: 0 -1px 2px 0 $border-color;

    &.fixed {
      position: fixed;
      right: 0;
      bottom: 0;
      left: $side-width;
      z-index: 1;
      transition: left .3s;
    }
  }

  .ui-shrink-layout & > .content.fixed {
    left: $side-shrink-width;
  }

  .ui-dark-mode & > .content {
    color: rgba(255,255,255,.6);
    background-color: $ui-body-bg-dark;
    box-shadow: 0 -1px 2px 0 rgba(0,0,0,.5);
  }
}
</style>
